<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <span style="margin-left:10px">人员名称：</span>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="搜索人员名称" v-model="listQuery.marketerName" clearable>
      </el-input>
      <span style="margin-left:10px">学校名称：</span>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="搜索学校名称" v-model="listQuery.academyName" clearable>
      </el-input>
      <span style="margin-left:10px">手机号：</span>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="搜索手机号" v-model="listQuery.marketerMobile" clearable>
      </el-input>

      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item addNewMarketer" type="success" icon="el-icon-plus" @click="addBatch">批量创建</el-button>
      <el-button class="filter-item addNewMarketer" type="success" icon="el-icon-plus" @click="addNewMarketer">新增市场人员</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="数据加载中，请稍后" border fit highlight-current-row style="width: 100%">
      <el-table-column width="100" align="center" label="人员编号">
        <template slot-scope="scope">
          <span>{{scope.row.marketerId}}</span>
        </template>
      </el-table-column>
      
      <el-table-column width="150" align="center" label="姓名">
        <template slot-scope="scope">
          <span>{{scope.row.marketerName}}</span>
        </template>
      </el-table-column>
      
      <el-table-column width="200" align="center" label="联系方式">
        <template slot-scope="scope">
          <span>{{scope.row.marketerMobile}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="200" align="center" label="关联院校" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ getSchoolLists(scope.row.academys) }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" type="danger" @click="handleisDelete(scope.row, 1)" v-if="scope.row.isDelete == 0">注销</el-button>
          <el-button size="small" type="primary" @click="handleisDelete(scope.row, 0)" v-else>恢复</el-button>
          <el-button size="small" type="primary" @click="handleModifyStatus(scope.row)" :disabled="scope.row.isDelete == 1">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>  

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10,20,30,50]" 
        :page-size="listQuery.pageSize" 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="total"
      >
      </el-pagination>
    </div>

    <Opearete-Marketer :dialog="createDialog" :action="dialogAction" :editObj="editObj" :notSubmit = "true" @cancel="createDialog = false" @reloadList="reloadList"></Opearete-Marketer>
    <Add-Batch :dialog="batchDialog" @cancel="batchDialog = false" @reloadList="reloadList"></Add-Batch>

  </div>  
</template>

<script>
import OpeareteMarketer from './components/opeareteMarketer'
import AddBatch from './components/addBatch'
import { academyIdAndName, startmarketer, stopmarketer, nameAndSchool } from '@/api/marketer'
export default {
  components: {
    OpeareteMarketer,
    AddBatch
  },
  data() {
    return {
      tableKey: 0,
      listLoading: false,
      list: null,
      total: null,
      createDialog: false,
      batchDialog: false,
      dialogAction: 'new',
      editObj: {},
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        marketerName: '',
        academyName: '',
        marketerMobile: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    reloadList() {
      setTimeout(() => {
        this.getList()
      }, 500)
    },
    // 获取市场人员列表信息
    getList() {
      this.listLoading = true
      const params = this.listQuery
      // academyIdAndName(params).then(response => {
      nameAndSchool(params).then(response => {
        const { code, data:{ total, list } } = response
        if(code == 0){
          this.total = total
          this.list = list
          this.listLoading = false
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 新增市场人员信息
    addNewMarketer(action) {
      this.createDialog = true
      this.dialogAction = 'new'
    },
    // 批量创建市场人员信息
    addBatch() {
      this.batchDialog = true
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    // 关联学校列表展示
    getSchoolLists(data) {
      let schoolLists = ''
      for (let i = 0; i < data.length; i++) {
        schoolLists += data[i].academyName
        if (i < data.length - 1) {
          schoolLists += '，'
        }
      }
      return schoolLists
    },
    handleisDelete(data, status) {
      data.isDelete = status
      if (status == 0) {
        // 恢复人员权限
        startmarketer(data.marketerId).then(res => {
          if (res.code == 0) {
            this.$message({
              message: '您已恢复该市场人员权限',
              type: 'success',
              center: true
            })
          }
        })
      } else {
        // 注销人员
        stopmarketer(data.marketerId).then(res => {
          if (res.code == 0) {
            this.$message({
              message: '该人员已注销！',
              type: 'warning',
              center: true
            })
          }
        })
      }
    },
    handleModifyStatus(data, action) {
      this.editObj = data
      this.createDialog = true
      this.dialogAction = 'edit'
    },
    handleFilter() {
      this.listQuery.pageNo = 1,
      this.listQuery.pageSize = 10
      // let params = {
      //   "academyName": this.schoolName,
      //   "marketerName": this.marketerName,
      //   "marketerMobile": this.marketerMobile,
      //   "pageNo": 1,
      //   "pageSize": 10
      // };
      this.listLoading = true
      // nameAndSchool(params).then(response => {
      //   const { code, data:{total,list} }  = response;
      //   if(code == 0){
      //     this.total = total
      //     this.list = list
      //     this.listLoading = false
      //   }
      // })
      this.getList()
    }
  }
}
</script>

<style lang="scss">
  .app-container {
    padding:20px;
  }
  .pagination-container{
    margin-top:30px;
    // text-align: center;
  }
  .addNewMarketer{
    margin-right: 50px;
    margin-left: 500px;
    float: right;
  }
  .el-tooltip__popper{
    max-width:50%
  }
</style>
